<script setup lang="ts">
import { ref, onMounted } from 'vue'

const hospital_bottom = ref<HTMLDivElement | null>(null)

// 改变组件位置
const Room_bottom = () => {
  if (!hospital_bottom.value) return
  const innerHeight = window.innerHeight
  const hospitalHeight = hospital_bottom.value.offsetTop
  if (innerHeight > hospitalHeight) {
    hospital_bottom.value.style.position = 'absolute'
    hospital_bottom.value.style.bottom = '0'
  }
}

onMounted(() => {
  Room_bottom()
})
</script>

<template>
  <div class="hospital_bottom" ref="hospital_bottom">
    <div class="content">
      <!-- 左侧 -->
      <div class="content_left">
        <span>京ICP备 154215635号</span>
        <span>电话挂号 010-524685</span>
      </div>
      <!-- 右侧 -->
      <div class="content_right">
        <span>联系我们</span>
        <span>合作伙伴</span>
        <span>用户协议</span>
        <span>隐私协议</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hospital_bottom {
  width: 100%;
  background-color: #f0f3f5;
  .content {
    height: $hospital_bottom;
    width: $container_width;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content_left {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 14px;
        color: #333;
        margin-right: 10px;
      }
    }

    .content_right {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 14px;
        color: #333;
        margin-right: 10px;
      }
    }
  }
}
</style>
